<template>
  <p class="breadcrumbBox" v-if="breadcrumbList.length > 0">
    当前位置：
    <span class="text" v-for="(item, i) in breadcrumbList" :key="i"
      >{{ item }}<i class="el-icon-arrow-right"></i
    ></span>
  </p>
</template>

<script>
export default {
  name: 'breadcrumb',
  data() {
    return {
      breadcrumbList: [],
    }
  },
  watch: {
    $route(to, from) {
      this.getbreadcrumb()
    },
  },
  methods: {
    getbreadcrumb() {
      this.breadcrumbList = this.getMatched(this)
    },
  },
  mounted() {
    this.getbreadcrumb()
  },
}
</script>

<style scoped>
.breadcrumbBox {
  font-size: 16px;
  font-family: Microsoft YaHei;
  text-align: left;
  height: 30px;
  position: relative;
  line-height: 30px;
  padding: 14px 11px 8px;
}
.breadcrumbBox span.text {
  position: relative;
  z-index: 9;
  vertical-align: top;
}
.el-icon-arrow-right {
  padding: 0 10px;
}
.breadcrumbBox span.text:last-child .el-icon-arrow-right {
  display: none;
}
</style>
